<!DOCTYPE html>
<html>
<head>
	<link href="./resources/jquery.mobile-1.0a3.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="./resources/center.js"></script>
	<script type="text/javascript" src="./resources/jquery.js"></script>
	<script type="text/javascript" src="./resources/jquery.mobile-1.0a3.js"></script>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />	
	<style type="text/css">
	  html { height: 100% }
	  body { height: 100%; margin: 0px; padding: 0px }
	  #map_canvas { height: 100% }
	</style>
	<script type="text/javascript"
	    src="http://maps.google.com/maps/api/js?sensor=false">
	</script>
	
	<script type="text/javascript">
	  function initialize() {
	    var latlng = new google.maps.LatLng(13.711428,100.594103);
	    var myOptions = {
	      zoom: 8,
	      center: latlng,
	      mapTypeId: google.maps.MapTypeId.ROADMAP
	    };
	    var map = new google.maps.Map(document.getElementById("map_canvas"),
	        myOptions);
	  }
	
	  
	
	</script>
</head>

<body>
	<div data-role="page" data-theme="a">
		<div data-role="header" data-backbtn="true">
			<h1>Manage Schedule</h1>
		</div>
		<div data-role="content">	
		<div id="current_date" style="text-align: right;"></div>	
			<button onclick="initialize()">Show Map</button>
			
		</div><!-- /content -->
	</div>
	<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>